<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>重复练习-组件版-todolist</title>
    <style>
        a{
            text-decoration: none;
        }
        .doneEventStyle{
            text-decoration: line-through;
            color: red;
        }
        .statuStyle{
            background: tomato;
            color: white;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 暴露使用在 html中的组件 不能大写组件名！！！ -->
        <todo-cpn></todo-cpn>
    </div>
    

    <script src="vue.js"></script>
    <script>
        // Vue V 字大写！！！！
        Vue.component('todo-cpn',{
            template:`
            <div>
                currentStatu:{{currentStatu}}
                <hr>
                <li v-for="item in todoListDate">{{item}}</li>
                <hr>
                <addEventCpn @addNewEventFoo="addNewEventFoo"></addEventCpn>
                <displayCpn :filterTodoListDate="filterTodoListDate" @changeDoneFoo="changeDoneFoo"></displayCpn>
                <statusCpn :currentStatu="currentStatu" @transStatusFoo="transStatusFoo" :transDoneEventSumDate="transDoneEventSumDate"></statusCpn>
            </div>
            `,
            data(){
                return {
                    currentStatu:"All",

                    // 任务列表
                    todoListDate:[
                        {name:"HTML",done:true,},
                        {name:"CSS",done:false,},
                        {name:"JavaScript",done:false,},
                    ],
                }
            },

            methods:{
                changeDoneFoo(index){
                    console.log("changeDoneFoo-run : "+index);
                    this.todoListDate[index].done = !this.todoListDate[index].done;
                },
                addNewEventFoo(newEvent){
                    console.log("addNewEventFoo-run : "+newEvent);
                    this.todoListDate.push({
                        name:newEvent,
                        done:false,
                    })
                },
                transStatusFoo(nowStatu){
                    console.log("transStatusFoo-run : "+nowStatu);
                    this.currentStatu = nowStatu;
                },
            },

            computed:{
                filterTodoListDate(){
                    switch (this.currentStatu){
                        case "Active": return this.todoListDate.filter(item => !item.done);
                        case "Done": return this.todoListDate.filter(item => item.done);
                        default: return this.todoListDate;
                    }
                },
                transDoneEventSumDate(){
                    var doneEventSum = (this.todoListDate.filter(item => item.done)).length;
                    var allEventSum = this.todoListDate.length;
                    var sumArr=[2];
                    console.log(sumArr);
                    sumArr[0]=doneEventSum;
                    sumArr[1]=allEventSum;
                    console.log(sumArr);
                    return sumArr;  
                }
            }

        });

        Vue.component('addEventCpn',{
            data(){
                return {
                    newEvent:'',
                }
            },
            template:`
            <div>
                <input type="text" v-model.lazy="newEvent">
                <button @click="transNewEventFoo">Add</button>
            </div>
            `,
            methods:{
                transNewEventFoo(){
                    this.$emit('addNewEventFoo',this.newEvent)
                    this.newEvent = "";
                }
            }
        });

        Vue.component('displayCpn',{
            props:{
                filterTodoListDate:{
                    type:[Array],
                    default: () => filterTodoListDate,
                },
            },
            template:`
            <div>
                <!-- 组件自定义事件传递方法属性 子组件要使用$emit()来接收-->
                <li v-for="(item, index) in filterTodoListDate" 
                :key="index"
                :class="{doneEventStyle:item.done}"
                @click="$emit('changeDoneFoo',index)" >
                {{item.name}}</li>
            </div>
            `,
        });

        Vue.component('statusCpn',{
            // props 使用数组接受值时 需要引号！！！
            props:['currentStatu','transDoneEventSumDate'],
            template:`
            <div>
                <a href="" @click.prevent="$emit('transStatusFoo','All')" :class="{statuStyle:currentStatu=='All'}">All</a>
                <a href="" @click.prevent="$emit('transStatusFoo','Active')" :class="{statuStyle:currentStatu=='Actice'}">Active</a>
                <a href="" @click.prevent="$emit('transStatusFoo','Done')" :class="{statuStyle:currentStatu=='Done'}">Done</a>
                {{transDoneEventSumDate[0]}}/{{transDoneEventSumDate[1]}}
            </div>
            `,
        });


        new Vue({
            el:"#app",
            data(){
                return {
                }
            },
        });
    
    </script>
    
</body>
</html>